<template>
    <div class="pendChartThree" v-if="schoolAuthority.CountTopList">
        <Row type="flex" justify="center">
            <span class="title">处理建议的人员前十排名</span>
        </Row>
        <div class="paimin">
            <Row class="paiminrow" v-for="(item, index) in schoolAuthority.CountTopList" :key="item.name">
                <Col offset=3 span=2>
                    <span class="tag">{{index + 1}}</span>
                </Col>
                <Col span=8>{{item.NAME.split(' ')[0]}}</Col>
                <Col span=5>{{item.NAME.split(' ')[1]}}</Col>
                <Col span=5>
                    <span class="right-tag">{{item.EVENTFLOW_SUM}}件</span>
                </Col>
            </Row>
        </div>
    </div>
    <div class="nodata" v-else>
        <img src="static/staff/nodate.png">
        <br>
        <br>
        <div class="text">处理建议的人员排行暂无数据</div>
    </div>
</template>

<script>
export default {
    components: {
    },
    data() {
        return {
            schoolAuthority: this.$store.state.schoolAuthority
        }
    }
}
</script>

<style lang="less">
.pendChartThree {
    height: 70vh;
    background-color: #fff;
    .title {
        margin-top: 30px;
        color: rgb(45, 140, 240);
        font-size: 16px;
    }
    .paimin{
        font-size: 14px;
        font-weight: bolder;
        height: 25px;
        margin-top: 20px;
        line-height: 25px;
        .paiminrow{
            margin-bottom: 10px;
        }
        .tag{
            display: inline-block;
            border-radius: 3px;
            width: 20px;
            height: 20px;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            color: #fffbf2;
            background-color: #ffc836;
        }
        .right-tag{
            background-color: #7ecef4;
            color: #fff;
            padding: 3px 5px;
            font-weight: normal;
        }
    }
}
</style>
